{{#section 'head'}}
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
    <script id="nursery-rhyme-template" type="text/x-handlebars-template">
        Marry had a little <b>{{animal}}</b>, its <b>{{bodyPart}}</b>
        was <b>{{adjective}}</b> as <b>{{noun}}</b>
    </script>
{{/section}}

<div id="nursery-rhyme">Clikc a button...</div>
<hr>
<button id="btn-nurser-rhyme">Generate nursery rhyme</button>
<button id="btn-nurser-rhyme-ajax">Generate nursery rhyme from AJAX</button>

{{#section 'jquery'}}
    <script>
        $(document).ready(function () {
            var nurseryRhymeTemplate = Handlebars.compile($('#nursery-rhyme-template').html());
            var $nurseryRhyme = $('#nursery-rhyme');
            $('#btn-nurser-rhyme').on('click', function (e) {
                e.preventDefault();
                $nurseryRhyme.html(nurseryRhymeTemplate({
                    animal: 'basilisk',
                    bodyPart: 'tail',
                    adjective: 'sharp',
                    noun: 'a needle'
                }));
            });
            $('#btn-nurser-rhyme-ajax').on('click', function (e) {
                e.preventDefault();
                $.ajax('/data/nursery-rhyme', {
                    success: function (data) {
                        $nurseryRhyme.html(nurseryRhymeTemplate(data));
                    }
                });
            });
        });
    </script>

{{/section}}